<template>
  <view v-if="show" class="mask">
    <view class="popup-content">
      <view 
        class="content-bg"
        :style="{ backgroundImage: 'url('+$config.design.new_coupon_bg+')' }"
      >
		<view class="coupon-title">{{title}}</view>
			<view class="coupon-box">
			<view class="coupon-list">
			  <view class="coupon-item" v-for="(item, index) in list" :key="index">
			    <!-- 左侧价格区 -->
			    <view class="price-area" v-if="item.discount_type===1">
			      <text class="amount">{{item.discount_money}}</text>
				  <text class="currency">￥</text>
			    </view>
				<view class="price-area" v-if="item.discount_type===2">
				  <text class="amount">{{item.discount_rate}}</text>
				  <text class="currency">折</text>
				</view>
			    
			    <!-- 右侧内容区 -->
			    <view class="content-area">
			      <view class="title">{{item.title}}</view>
			      <view class="valid-date">{{item.term_type_name}}</view>
			    </view>
			  </view>
			</view>
			<view class="lingqu" @click="gotoList">
				查看详情
			</view>
			<view class="close-icon">
				<u-icon name="close-circle" size="40" color="#d1d1d1" @click="close"></u-icon>
			</view>
		</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
	props: {
	},
	data() {
		return {
			show:false,
			title:'',
			list: []
		}
	},
	methods: {
		open() {
			this.show = true
			this.$u.api.couponUserList({page:1,limit:50}).then(res=>{
				this.list=res.data.list
				this.title=res.data.new_coupon_title??'新用户注册福利'
			})
		},
		close() {
			this.show = false
			this.couponBack()
		},
		gotoList(){
			this.couponBack()
			this.$c.a('coupon/user/index')
			this.show = false
		},
		//回调关闭下次弹窗
		couponBack(){
			this.$u.api.couponBack({type:1}).then(res=>{
				
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}
.coupon-title{
	color: #fff;
	font-size: 40rpx;
	position: absolute;
	top: 150rpx;
	right: 50rpx;
}
.popup-content {
  width: 650rpx;
  height: 960rpx; // 根据实际图片比例设置
}
.coupon-box{
	padding: 40rpx;
	padding-top: 250rpx;
}
.content-bg {
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: relative;
}
/* 列表容器 */
.coupon-list {
	height: 550rpx;
	width: 100%;
	overflow-y: scroll;
}

/* 单个优惠券 */
.coupon-item {
  display: flex;
  border-radius: 16rpx;
  margin-bottom: 24rpx;
  background-image: url(@/static/images/coupon-item.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  height: 150rpx;
}

/* 价格区域 */
.price-area {
  width: 200rpx;
  padding: 25rpx;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items:center;
}

.currency {
  font-size: 28rpx;
  margin-top: 16rpx;
  color: #e4393c;
}

.amount {
  font-size: 50rpx;
  font-weight: bold;
  color: #e4393c;
  line-height: 1;
}

/* 内容区域 */
.content-area {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 24rpx 34rpx;
  width: 100%;
}

.title {
  font-size: 32rpx;
  color: #333;
  font-weight: 600;
  margin-bottom: 20rpx;
}

.valid-date {
  font-size: 24rpx;
  color: #999;
  bottom: 32rpx;
  right: 32rpx;
}
.lingqu{
	margin-top: 40rpx;
	border-radius: 50rpx;
	width: 100%;
	height: 80rpx;
	background:linear-gradient(to bottom, #fbde14, #e6c300);
	color: #ff4e1c;
	font-size: 36rpx;
	font-weight: 600;
	text-align: center;
	line-height: 80rpx;
}
.close-icon{
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	top: 100rpx;
}
</style>